<template>
<!-- 财务审核 -->
    <div>
      <el-container>
         <el-header style="padding: 0px;display:flex;justify-content:space-between;align-items: center">
          <div style="display: inline">
            <el-input
            placeholder="请输入合同编号"
            clearable
            style="width: 300px;margin: 0px;padding: 0px;"
            size="mini"
            :disabled="advanceSearchViewVisible"
            @keyup.enter.native="searchEmp"
            prefix-icon="el-icon-search"
            v-model="contractNo">
            </el-input>
            <el-button type="primary" size="mini" style="margin-left: 5px"
              icon="el-icon-search" @click="searchEmp" :disabled="advanceSearchViewVisible">搜索
            </el-button>
            <el-button slot="reference" type="primary" size="mini" style="margin-left: 5px"
              @click="showAdvanceSearchView">
              <i class="fa fa-lg" v-bind:class="[advanceSearchViewVisible ? faangledoubleup:faangledoubledown]"
                style="margin-right: 5px"></i>高级搜索
            </el-button>
          </div>
          <div style="margin-left: 5px;margin-right: 20px;display: inline">
          
            <el-button type="success" size="mini" :disabled="exportLoading" :loading="exportLoading" @click="exportEmps"><i class="fa fa-lg fa-level-down"
              style="margin-right: 5px"></i>导出清单
            </el-button>
          </div>
         </el-header>
        <el-main>
          <!-- 高级搜索 -->
          <transition name="slide-fade">
            <div style="margin-bottom: 10px;border: 1px;border-radius: 5px;border-style: solid;padding: 10px;box-sizing:border-box;border-color: #20a0ff"
                v-show="advanceSearchViewVisible"> 
                <el-row>
                  <el-col :span="12">
                    <span>财务审核时间:</span>  
                    <el-date-picker
                        v-model="time1"
                        type="daterange"
                        range-separator="至"
                        start-placeholder="开始日期"
                        end-placeholder="结束日期"
                        value-format="yyyy-MM-dd"
                        :picker-options="birthdayOptions">
                    </el-date-picker>
                  </el-col>
                </el-row>
                <el-row>
                  <el-col :span="8">
                    <el-button icon="el-icon-search" type="primary" size="mini" @click="search">搜索</el-button>
                    <el-button size="mini" @click="cancelSearch">取消</el-button>
                  </el-col>
                </el-row>  
            </div>
          </transition>
          <!-- 表单列表 -->
          <div>
            <el-table
              :data="table"
              v-loading="tableLoading"
              border
              stripe 
              size="mini"
              height="900"
              style="width: 100%">
              <el-table-column
                label="合同编号"
                prop="contractNo"
                align="center"
                fixed
                width="120">
              </el-table-column>
              <el-table-column
                align="center"
                prop="createdTime"
                label="录入时间"
                width="150">
              </el-table-column>
              <el-table-column
                width="180"
                align="center"
                fixed
                label="产品名称"
                prop="productName">
              </el-table-column>
              <el-table-column
                width="85"
                align="center"
                label="录入人"
                prop="createdBy">
              </el-table-column>  
              <el-table-column
                width="100"
                align="center"
                fixed
                label="资产受让人"
                prop="customerName">
              </el-table-column>
              <el-table-column
                width="150"
                align="center"
                label="身份证号"
                prop="idCard">
              </el-table-column>
              <el-table-column
                width="100"
                label="生日"
                align="center"
                prop="birthday">
              </el-table-column>
              <el-table-column
                label="年龄"
                align="center"
                prop="age">
              </el-table-column>
              <el-table-column
                label="性别"
                prop="sex"
                align="center">
              </el-table-column>
              <el-table-column
                width="180"
                align="center"
                label="打款账号"
                prop="payBankCard">
              </el-table-column>
              <el-table-column
                width="180"
                align="center"
                label="收款账号"
                prop="receiveBankCard">
              </el-table-column>
              <el-table-column
                width="220"
                align="center"
                label="打款银行开户行"
                prop="payOpeningBank">
              </el-table-column>
              <el-table-column
                align="center"
                width="220"
                label="收款银行开户行"
                prop="receiveOpeningBank">
              </el-table-column>
              <el-table-column
                width="100"
                align="center"
                label="联系电话"
                prop="telPhone">
              </el-table-column>
              <el-table-column
                width="300"
                align="center"
                label="联系地址"
                prop="address">
              </el-table-column>
              <el-table-column
                align="center"
                label="付款方式"
                prop="investmentType">
              </el-table-column>
              <el-table-column
                width="100"
                align="center"
                label="资产转让总额"
                prop="totalAssets">
              </el-table-column>
              <el-table-column
                width="85"
                align="center"
                label="预期收益率(%)"
                prop="returnRate">
              </el-table-column>
              <el-table-column
                width="150"
                align="center"
                label="标准业绩"
                prop="standardCoefficientFee">
              </el-table-column>
              <el-table-column
                width="150"
                align="center"
                label="标准业务折标系数"
                prop="standardCoefficient">
              </el-table-column>
              <el-table-column
                width="95"
                align="center"
                label="服务人员"
                prop="salemanInfo.salemanName">
              </el-table-column>
              <el-table-column
                width="95"
                align="center"
                label="区"
                prop="salemanInfo.area">
              </el-table-column>
              <el-table-column
                width="95"
                align="center"
                label="部"
                prop="salemanInfo.part">
              </el-table-column>
              <el-table-column
                width="95"
                align="center"
                label="组"
                prop="salemanInfo.group">
              </el-table-column>
              <el-table-column
                align="center"
                width="70"
                label="新老客户"
                prop="customerType">
              </el-table-column>
              <el-table-column
                align="center"
                width="150"
                label="回执回销时间"
                prop="receiptSellBackTime">
              </el-table-column>
              <el-table-column
                align="center"
                width="100"
                label="银行到账金额"
                prop="bankEceivedAmount">
              </el-table-column>
              <el-table-column
                align="center"
                width="100"
                label="银行手续费"
                prop="bankFee">
              </el-table-column>
              <el-table-column
                align="center"
                width="100"
                label="银行打款日期"
                prop="payDate">
              </el-table-column>
              <el-table-column
                align="center"
                width="100"
                label="银行到账日期"
                prop="bankReceivedDate">
              </el-table-column>
              <el-table-column
                align="center"
                width="150"
                label="财务审核时间"
                prop="financeCheckTime">
              </el-table-column>  
              <el-table-column
                align="center"
                width="150"
                label="驳回时间"
                prop="rejectionTime"
                >
              </el-table-column>
              <el-table-column
                width="200"
                align="center"
                label="驳回理由"
                prop="remark"
                :show-overflow-tooltip="true">
              </el-table-column>
              <el-table-column
                align="center"
                width="120"
                label="状态"
                fixed="right"
                prop="status">
              </el-table-column>
              <el-table-column
                fixed="right"
                align="center"
                label="操作"
                width="100">
                <template slot-scope="scope">
                  <el-button style="padding: 3px 4px 3px 4px;margin: 2px" type="warning"
                            size="mini" @click="showEditEmpView(scope.row)"
                            v-if="scope.row.status =='等待财务审核'">审核信息
                  </el-button>
                  <el-button style="padding: 3px 4px 3px 4px;margin: 2px" type="danger"
                            size="mini" @click="showEditEmpView(scope.row)"
                            v-if="scope.row.status =='风控驳回'">修改信息
                  </el-button>
                  <el-button style="padding: 3px 4px 3px 4px;margin: 2px" type="primary"
                            size="mini" @click="showEditEmpView(scope.row)"
                            v-if="scope.row.status!='等待财务审核' &&scope.row.status!='风控驳回' ">查看信息
                  </el-button>
                </template>
              </el-table-column>
            </el-table>
            <el-pagination
                background
                :page-size="pageSize"
                :current-page="currentPage"
                @current-change="currentChange"
                layout="prev, pager, next"
                :total="totalCount"
                style="margin:50px;">
            </el-pagination>
            <div style="margin:30px 0;" class="fw">共{{Math.ceil(totalCount/pageSize)}}页,{{totalCount}}条信息</div>
          </div>
        </el-main>
        <!-- 审核信息 -->
        <template>
          <el-dialog title="财务审核" :visible.sync="dialogFormVisible" 
            v-loading="dialogLoading"
            :close-on-click-modal="false"
            width="80%"
            >
            <el-form :model="form"  ref="form" :disabled="form.disabled">
              <el-row>
                <el-col :span="8">
                  <el-form-item label="合同编号:">
                      {{form.contractNo}}
                  </el-form-item>
                </el-col>
                <el-col :span="8">
                  <el-form-item label="产品名称:" >
                    {{form.productName}}
                  </el-form-item>
                </el-col>
                <el-col :span="8">
                  <el-form-item label="折标系数:" >
                    {{form.standardCoefficient}}
                  </el-form-item>
                </el-col>
              </el-row>
              <el-row>
                <el-col :span="8">
                  <el-form-item label="资产受让人:">
                      {{form.customerName}}
                  </el-form-item>
                </el-col>
                <el-col :span="8">
                  <el-form-item label="身份证号:">
                      {{form.idCard}}
                  </el-form-item>
                </el-col>
                <el-col :span="8">
                  <el-form-item label="新老客户:">
                      {{form.customerType}}
                  </el-form-item>
                </el-col>
              </el-row>
              <el-row>
                <el-col :span="8">
                  <el-form-item label="生日:">
                      {{form.birthday}}
                  </el-form-item>
                </el-col>
                <el-col :span="8">
                  <el-form-item label="年龄:">
                      {{form.age}}
                  </el-form-item>
                </el-col>
                <el-col :span="8">
                  <el-form-item label="性别:">
                      {{form.sex}}
                  </el-form-item>
                </el-col>
              </el-row>
              <el-row>
                <el-col :span="8">
                  <el-form-item label="打款账号:">
                      {{form.payBankCard}}
                  </el-form-item>
                </el-col>
                <el-col :span="8">
                  <el-form-item label="收款账号:">
                      {{form.receiveBankCard}}
                  </el-form-item>
                </el-col>
              </el-row>
              <el-row>
                <el-col :span="8">
                  <el-form-item label="打款银行开户行:">
                      {{form.payOpeningBank}}
                  </el-form-item>
                </el-col>
                <el-col :span="8">
                  <el-form-item label="收款银行开户行:">
                      {{form.receiveOpeningBank}}
                  </el-form-item>
                </el-col>
              </el-row>
              <el-row>
                <el-col :span="8">
                  <el-form-item label="联系电话:">
                      {{form.telPhone}}
                  </el-form-item>
                </el-col>
                <el-col :span="8">
                  <el-form-item label="联系地址:">
                      {{form.address}}
                  </el-form-item>
                </el-col>
                <el-col :span="8">
                  <el-form-item label="服务人员:" prop="salemanName">
                      {{form.salemanName}}
                  </el-form-item>
                </el-col>
              </el-row>
              <el-row>
                <el-col :span="8">
                  <el-form-item label="付款方式:" prop="investmentType">
                      {{form.investmentType}}
                  </el-form-item>
                </el-col>
                <el-col :span="8">
                  <el-form-item label="资产转让总额:"  prop='totalAssets'>
                      {{form.totalAssets}}
                  </el-form-item>
                </el-col>
                <el-col :span="8">
                  <el-form-item label="预期收益率:">
                    {{form.totalAssetsReturn}}
                  </el-form-item>
                </el-col>
              </el-row>
              <el-row>
                <el-col :span="8" v-if="form.receiptSellBackTime!=null">
                  回执回销时间：{{form.receiptSellBackTime}}
                </el-col> 
                <el-col :span="8">
                  <el-form-item label="标准业绩:">
                    {{form.standardCoefficientFee}}
                  </el-form-item>
                </el-col>  
                <el-col :span="8">
                  <el-form-item label="银行打款日期:">
                    {{form.payDate}}
                  </el-form-item>
                </el-col>
              </el-row>
              <el-row>
                <el-col :span="8">
                    <el-form-item label="银行到账金额:">
                        <el-input type="text" auto-complete="off" placeholder="请输入银行到账金额" 
                            clearable v-model="form.bankEceivedAmount">
                        </el-input>
                    </el-form-item>
                </el-col>
                <el-col :span="8">
                    <el-form-item label="手续费:">
                        <el-input type="text" auto-complete="off" placeholder="请输入手续费" 
                            clearable v-model="form.bankFee">
                        </el-input>
                    </el-form-item>
                </el-col>
                <el-col :span="8">
                    <el-form-item label="银行到账日期:">
                        <el-date-picker
                            v-model="form.bankReceivedDate"
                            type="date"
                            placeholder="选择银行到账日期"
                            value-format="yyyy-MM-dd">
                        </el-date-picker>
                    </el-form-item>
                </el-col>
              </el-row>
              <el-row>
                <el-col :span="24">
                    <el-form-item label="驳回原因:">
                        <el-input type="text" auto-complete="off" placeholder="如需驳回，请输入原因" 
                            clearable v-model="form.remark">
                        </el-input>
                    </el-form-item>
                </el-col>
              </el-row>
              <el-row>
                  <el-col :span="15"></el-col>
                  <el-col :span="8" style="text-align:right;">
                      <el-button type="primary" @click="sureAdd">通过</el-button>
                      <el-button type="danger" @click="cancelAdd">驳回</el-button>
                  </el-col>
                  <el-col :span="1"></el-col>
              </el-row>
            </el-form>
          </el-dialog>
        </template>
      </el-container>
    </div>
</template>
<script>
var productId = -1;
var salemanId = "";
var contractId = -1;
var searchInfo={
  contractNo:"",
  startFinanceCheckTime:"",
  endFinanceCheckTime:""
}
export default {
  data() {
    return {
      exportLoading:false,
      contractNo: "",
      saleman: "",
      advanceSearchViewVisible: false,
      faangledoubleup: "fa-angle-double-up",
      faangledoubledown: "fa-angle-double-down",
      time1: [],
      dialogFormVisible: false,
      inputsalemanNameLoading: false,
      dialogLoading: false,
      inputsalemanNameArray: [],
      state4: "",
      birthdayOptions: {
        disabledDate(time) {
          return time.getTime() > Date.now();
        }
      },
      form: {
        contractNo: "",
        productName: "",
        standardCoefficient: 0,
        customerName: "",
        idCard: "",
        sex: "男",
        birthday: "",
        age: "",
        payBankCard: "",
        receiveBankCard: "",
        payOpeningBank: "",
        receiveOpeningBank: "",
        telPhone: "",
        address: "",
        totalAssets: "",
        totalAssetsReturn: 0,
        investmentType: "",
        salemanName: "",
        disabled: false,
        bankEceivedAmount: "",
        bankFee: "",
        bankReceivedDate: "",
        remark: ""
      },
      table: [],
      tableLoading: false,
      currentPage: 1,
      pageSize: 20,
      totalCount: 0,
      tableSearchModel: "common",
      receiptSellBackTimeShow: false,
      receiptSellBackTime: "",
      surereceiptSellBackTimeLoading: false
    };
  },
  mounted: function() {
    this.initData();
  },
  methods: {
    initData: function() {
      this.requestTableInfo(
        this.tableSearchModel,
        this.currentPage,
        this.pageSize
      );
    },
    // 请求列表数据
    requestTableInfo: function(model, pageCount, pageSize) {
      var that = this;
      //根据合同编号搜查的普通模式
      if (model == "common") {
        that.tableLoading = true;
        that
          .postRequest("/finance/queryContract", {
            contractNo: that.contractNo,
            pageIndex: pageCount,
            pageSize: pageSize
          })
          .then(resp => {
            that.tableLoading = false;
            if (resp && resp.data.status == 200) {
              that.table = resp.data.obj.rows;
              that.totalCount = resp.data.obj.total;
              searchInfo={
                contractNo:that.contractNo,
                startFinanceCheckTime:"",
                endFinanceCheckTime:""
              }
            }
          });
      } else if (model == "senior") {
        //高级搜索模式
        this.time1 = this.time1 || [];
        this.time1[0] = this.time1[0] || "";
        this.time1[1] = this.time1[1] || "";
        that.tableLoading = true;
        that
          .postRequest("/finance/queryContract", {
            startFinanceCheckTime:this.time1[0],
            endFinanceCheckTime:this.time1[1],
            pageIndex: pageCount,
            pageSize: pageSize
          })
          .then(resp => {
            that.tableLoading = false;
            if (resp && resp.data.status == 200) {
              that.table = resp.data.obj.rows;
              that.totalCount = resp.data.obj.total;
              searchInfo={
                contractNo:"",
                startFinanceCheckTime:this.time1[0],
                endFinanceCheckTime:this.time1[1]
              }
            }
          });
      }
    },
    //列表当前页改变
    currentChange: function(currentChange) {
      this.currentPage = currentChange;
      this.requestTableInfo(
        this.tableSearchModel,
        this.currentPage,
        this.pageSize
      );
    },
    //查看列表信息
    showEditEmpView: function(item) {
      console.log(item)
      this.dialogFormVisible = true;
      this.form = item;
      if(item.status=="等待财务审核" || item.status=='风控驳回'){
        this.form.disabled = false;
      }else{
          this.form.disabled = true;
      }
      this.form.totalAssetsReturn = item.returnRate;
      this.form.salemanName = item.salemanInfo.salemanName;
      contractId=item.contractId;
    },
    // 点击高级搜索
    showAdvanceSearchView() {
      this.advanceSearchViewVisible = !this.advanceSearchViewVisible;
      this.contractNo = "";
      if (this.tableSearchModel == "common") {
        this.tableSearchModel = "senior";
      } else if (this.tableSearchModel == "senior") {
        this.tableSearchModel = "common";
      }
    },
    //取消高级搜索
    cancelSearch: function() {
      this.advanceSearchViewVisible = false;
      this.tableSearchModel = "common";
    },
    // 普通搜索
    searchEmp: function() {
      this.currentPage = 1;
      this.requestTableInfo(
        this.tableSearchModel,
        this.currentPage,
        this.pageSize
      );
    },
    //高级搜索
    search: function() {
      this.currentPage = 1;
      this.requestTableInfo(
        this.tableSearchModel,
        this.currentPage,
        this.pageSize
      );
    },
    // 导出清单
    exportEmps: function() {
      this.exportLoading = true; 
      var address=`/finance/finance_export_contract?contractNo=${searchInfo.contractNo}&&startFinanceCheckTime=${searchInfo.startFinanceCheckTime}&&endFinanceCheckTime=${searchInfo.endFinanceCheckTime}`;
      // window.open(address,"_self"); 
      this.common.downloadFile(address)
      setTimeout(() => {
        this.exportLoading =false;
      }, 2000);
    },

    // 输入服务人员
    inputsalemanNameMethod: function(query) {
      if (query !== "") {
        this.inputsalemanNameLoading = true;
        this.getRequest("/auditor/matchingSaleman?salemanName=" + query).then(
          resp => {
            if (resp && resp.data.status == 200) {
              this.inputsalemanNameArray = resp.data.obj;
            }
            this.inputsalemanNameLoading = false;
          }
        );
      } else {
        this.inputsalemanNameArray = [];
      }
    },
    // 服务人员发生变化
    salemanNameChange: function(e) {
      var that = this;
      if (e == "") {
        salemanId = "";
      } else {
        this.getRequest("/auditor/matchingSaleman?salemanName=" + e).then(
          resp => {
            if (resp && resp.data.status == 200) {
              salemanId = resp.data.obj[0].salemanId;
            }
          }
        );
      }
    },
    //确认录入
    sureAdd: function() {
      var that=this;
      if (this.common.isNull(this.form.bankEceivedAmount) || this.form.bankEceivedAmount==null) {
        this.common.showToast("info", "请输入银行到账金额");
      } else if (this.common.isNull(this.form.bankFee) || this.form.bankFee==null) {
        this.common.showToast("info", "请输入手续费");
      } 
      else if (
        this.common.isNull(this.form.bankReceivedDate) ||
        this.form.bankReceivedDate == null
      ) {
        this.common.showToast("info", "请选择银行到账日期");
      }
      
      else if(this.common.accAdd(this.form.bankEceivedAmount,this.form.bankFee)!=this.form.totalAssets){
        this.common.showToast("info", "银行到账金额加手续费需等于转让总价");
      }      
      else {
        this.dialogLoading = true;
        this.putRequest("/finance/verify", {
          contractId: contractId,
          bankEceivedAmount: this.form.bankEceivedAmount,
          bankFee: this.form.bankFee,
          bankReceivedDate: this.form.bankReceivedDate
        }).then(resp => {
          that.dialogLoading = false;
          if (resp && resp.data.status == 200) {
            that.dialogFormVisible = false;
            that.common.showToast("success", resp.data.msg);
            this.initData();
          }
        });
      }
    },
    // 驳回
    cancelAdd: function() {
        var that=this;
        if (this.common.isNull(this.form.remark) || this.form.remark==null) {
            this.common.showToast("info", "请输入驳回理由");
        }else{
            this.dialogLoading = true;
            this.postRequest("/finance/reject", {
            contractId: contractId,
            remark:this.form.remark,
            }).then(resp => {
            that.dialogLoading = false;
            if (resp && resp.data.status == 200) {
                that.dialogFormVisible = false;
                that.common.showToast("success", resp.data.msg);
                this.initData();
            }
            });
        }
    },
  }
};
</script>
<style scoped>
.el-row {
  margin-top: 10px;
}
.el-col {
  min-height: 50px;
  line-height: 50px;
  text-align: left;
}
.el-input {
  width: 50%;
}
.el-dialog__body {
  padding-top: 0px;
  padding-bottom: 0px;
}

.slide-fade-enter-active {
  transition: all 0.8s ease;
}

.slide-fade-leave-active {
  transition: all 0.8s cubic-bezier(1, 0.5, 0.8, 1);
}

.slide-fade-enter,
.slide-fade-leave-to {
  transform: translateX(10px);
  opacity: 0;
}
.idcard {
  border-bottom: 1px solid #ccc;
}
</style>
